<template>
  <div>
    <div v-for="(data,index) in datas">
      <p>商品{{index}}共花费了:{{ data }}</p>
    </div>
    <div>总共消费: ${{add}}</div>
  </div>
  <hr>
</template>

<script setup>
import { ref,reactive,computed } from 'vue'
const datas = reactive({
  '一':100,
  '二':200,
  '三':300,
})
const costs = ((value) => {
  return '$' + value.toFixed(2)
})
const add = computed(() => {
  return Object.values(datas).reduce((a,b) => a + b)
})

</script>

<style scoped>

</style>